<template>
	<view class="content">
		<view class="list">
			<view class="list-item" @click="setUrl(item.data.nickname,item.userId,item.data.avatar)" v-for="(item,index) in dataList" :key="index">
				<view class="list-item-lizi">
					<view class="userimg">
						<image :src="item.data.avatar ? item.data.avatar : 'https://csg-app-im.oss-cn-hangzhou.aliyuncs.com/goeasy-im-csg_communication/uni-image_20820_202108181530.png'" mode=""></image>
					</view>
					<view class="userData">
						<view class="item-top">
							<view class="item-top-left">{{item.data.nickname}}</view>
							<view class="item-top-right">{{item.time}}</view>
						</view>
						<view class="item-bottom">
							<view class="item-bottom-left">{{item.lastMessage.payload.text ? item.lastMessage.payload.text : '[图片]'}}</view>
							<view class="item-bottom-right"><span v-if="item.unread > 0">{{item.unread}}</span></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 
			<view class="list-item">
				<view class="list-item-lizi">
					<view class="userimg">
						<image src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="userData">
						<view class="item-top">
							<view class="item-top-left">小铲屎官</view>
							<view class="item-top-right">45分钟前</view>
						</view>
						<view class="item-bottom">
							<view class="item-bottom-left">请问下你的猫怎么领养啊？</view>
							<view class="item-bottom-right"><span>99</span></view>
						</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-lizi">
					<view class="userimg">
						<image src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="userData">
						<view class="item-top">
							<view class="item-top-left">小铲屎官</view>
							<view class="item-top-right">45分钟前</view>
						</view>
						<view class="item-bottom">
							<view class="item-bottom-left">请问下你的猫怎么领养啊？</view>
							<view class="item-bottom-right"><span>99</span></view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	name:'privateLetter',
	data() {
		return {}
	},
	props:['dataList'],
	watch:{
		dataList(){
			// let data1 = this.format(this.dataList[0].lm,'yyyy-MM-dd HH:mm:ss')
			console.log(8529634741)
			console.log(this.dataList)
		}
	},
	methods:{
		setUrl(e,id,img){
			uni.navigateTo({
				url: './chat/chat?name='+ e + '&id=' + id + '&img=' + img
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	
		.item-bottom-left{
			width: 80%;
			height: 100%;
			white-space:nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			font-size: 28rpx;
			color: #AAAAAA;
		}
		.item-bottom-right{
			width: 20%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			span{
				padding: 0rpx 11rpx;
				border-radius: 50rpx;
				background: #FE4A55;
				color: white;
			}
		}
		.item-top-left{
			width: 70%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row;
			font-size: 34rpx;
			font-weight: bold;
		}
		.item-top-right{
			width: 30%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			font-size: 28rpx;
			color: #AAAAAA;
		}
		.item-top{
			width: 100%;
			height: 50%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
		}
		.item-bottom{
			width: 100%;
			height: 50%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
			margin-top: 10rpx;
		}
		.userData{
			width: calc(100% - 130rpx);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.userimg{
			width: 100rpx;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: row;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				// margin-right: 20rpx;
			}
		}
		.list-item-lizi{
			width: 700rpx;
			height: 160rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: row;
		}
		.list-item{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #f2f2f2;
		}
		.list{
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			background: white;
		}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
